<template>
  <view>
    <!-- 余额开始 -->
    <view class="money">
      <!-- 积分余额 -->
      <view class="money-top">
        <view class="integral-left">
          <view>
            积分余额
          </view>
          <text>0.40</text>
        </view>
        <!-- 提现 -->
        <navigator  url="../integral/integral" class="integral-right">
          <text>￥</text>
          <text style="color: #c00;">提现</text>
        </navigator>
      </view>
      <!--  积分数量 -->
      <view class="money-buttom">
        <view class="money-jifen">
          <view>
            今日积分
          </view>
          <text>0</text>
        </view>
        <view class="class=money-jifen">
          <view>
            昨日积分
          </view>
          <text>0</text>
        </view>
        <view class="class=money-jifen">
          <view>
            累计积分
          </view>
          <text>0</text>
        </view>
      </view>

    </view>
    <!-- 余额结束 -->

    <!-- 选项开始 -->
    <view class="jiFen">
      <!-- 积分明细 -->
      <view class="jiFen-mingxi" :class="active===1?'active':''" @click="a(1)">
        积分明细
      </view>
      <!-- 提现记录 -->
      <view class="jiFen-jilu" :class="active===2?'active':''" @click="a(2)">
        提现记录
      </view>
    </view>
    <!-- 选项结束 -->

    <!-- 显示内容开始 -->
    <view class="contetn" v-for="(item,i) in myList" :key="i">
      <view class="contetn-left">
        <view style="font-size: 30rpx;">
          每日签到
        </view>
        <view>
          积分余额:{{item.money}}
        </view>
      </view>
      <view class="contetn-right">
        <view style="font-weight: 700;font-size: 30rpx; color: red;text-align: right;">
          {{item.jifen}}积分
        </view>
        <view style="color: #888;">
          {{item.date}}
        </view>
      </view>
    </view>

    <!-- 没有更多数据 -->
    <myBox></myBox>
  </view>


  </view>
  <!-- 显示内容结束 -->

</template>

<script>
  import myBox from "../../components/my-box/my-box.vue"
  export default {
    components: {
      myBox
    },
    data() {
      return {
        active: 1,
        myList: [{
          money: '0.40',
          jifen: '0.20',
          date: '2020-11-11 07:35:51'
        }, {
          money: '0.40',
          jifen: '0.20',
          date: '2020-11-11 07:35:51'
        }, {
          money: '0.40',
          jifen: '0.20',
          date: '2020-11-11 07:35:51'
        }]
      };
    },
    methods: {
      a(i) {
        this.active = i;
      }
    }
  }
</script>

<style lang="scss">
  .money {
    background-color: #fdd201;
    height: 300rpx;

    .money-top {
      height: 200rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;
      font-size: 22rpx;

      .integral-left {
        view {
          margin-bottom: 20rpx;
        }

        text {
          font-size: 58rpx;
          font-size: 700;
        }
      }

      .integral-right {
        width: 120rpx;
        height: 60rpx;
        background-color: #fff;
        border-radius: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        text:nth-child(1) {
          display: inline-block;
          width: 30rpx;
          height: 30rpx;
          text-align: center;
          line-height: 30rpx;
          background-color: #c00;
          color: #fff;
          border-radius: 50%;
          margin-right: 10rpx;
          box-shadow: 0px 0px 30px 0px rgba(0, 0, 1, 0.2);
        }
      }
    }

    // 积分数量
    .money-buttom {
      height: 100rpx;
      display: flex;

      .money-jifen {
        height: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-bottom: 20rpx;

        view {
          font-size: 22rpx;
          margin-bottom: 10rpx;
        }

        text {
          font-size: 32rpx;
          font-weight: 700;
        }
      }
    }
  }

  // 选项开始
  .jiFen {
    display: flex;
    height: 100rpx;
    background-color: #fff;
    align-items: center;
    text-align: center;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 1, 0.2);
    margin-bottom: 20rpx;

    .jiFen-mingxi {
      flex: 1;
    }

    .jiFen-jilu {
      flex: 1;
    }
  }

  .active {
    color: #f23a3a;
    position: relative;
    font-weight: 700;

    &::before {
      content: ' ';
      display: block;
      width: 120rpx;
      height: 6rpx;
      background-color: #c00000;
      position: absolute;
      bottom: -30rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  // 选项结束



  // 显示内容开始
  .contetn {
    background-color: #fff;
    height: 120rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    font-size: 26rpx;
    border-bottom: 1px solid #F5F5F5;
  }

  // 显示内容结束
</style>
